<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/9
  Time: 20:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>
        网上银行登录
    </title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" >
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url("/static/img/背景.jpg");
        }
        img{
            width: 140px;
            margin-left: 80px;
            margin-top: 80px;
        }
        #d{
            /* border: 1px solid red; */
            position: relative;/* 相对于原始位置定位 */
            top:160px;
            left: 160px;
        }
        #sp1,#sp2,#sp3{
            color: white;
        }
        #sp1{
            font-size: 50px;
            font-weight: bold;
        }
        #sp2{
            font-size: 30px;
            font-weight: 100;
        }
        #sp3{
            font-size: 14px;
            font-weight: 100;
            margin-left: 80px;
            position: relative;
            top: 600px;
        }
        #db{
            width: 480px;
            height: 640px;
            position: absolute;
            top:70px;
            right: 140px;
            background: rgba(255, 255, 255,0.9);
            border-radius: 16px;/* 圆角 */
        }
        #d1{
            margin-top: 50px;
            margin-left: 30px;
        }
        .t{
            width: 350px;
            height: 40px;
            border-radius: 4px;
            outline: none;/* 去轮廓 */
            border: 0.5px gray solid;/* 加边框 */
            padding-left: 10px;
            margin-left: 5px;
        }
        .s{
            font-weight: 100;
            color: rgba(0, 0, 0, 0.8);/* 带透明度的三原色，透明度为0.8 */

        }
        #d2{
            margin-left: 30px;
            margin-top: 50px;
        }
        #b{
            height: 50px;
            width: 420px;
            background: #2E58FF;
            border-radius: 50px;
            outline: none;
            color: white;
            border: none;
            font-size: 16px;
            margin-left: 32px;
            margin-top: 30px;
            position: relative;
            bottom: 80px;
        }
        #sp{
            font-size: 12px;
        }
        #sp > a{
            text-decoration: none;
            color: #2E58FF;
        }
    </style>

    <script>
        $(function () {
            $("#b").click(function () {
                var flag = true;
                if ($("#phone").val()==null||$("#phone").val()===""){
                    flag = false;
                    return flag;
                }
                if ($("#password").val()==null||$("#password").val()===""){
                    flag = false;
                    return flag;
                }
                if ($("#verifycode").val()==null||$("#verifycode").val()===""){
                    flag = false;
                    return flag;
                }
                if (flag){
                    //alert($("#phone").val());
                    var phone = $("#phone").val();
                    //alert($("#password").val());
                    var password = $("#password").val()
                    //alert($("#verifycode").val());
                    var verficode = $("#verifycode").val();
                    location.href = "${pageContext.request.contextPath}/userServlet?action=login&phone="+phone+"&password="+password+"&verifycode="+verficode;
                }

            })
            $("#code_img").click(function () {
                this.src = "/kaptcha.jpg?date="+new Date().getTime();
            })
            $("#phone").focus(function () {
                $("#phone").css("border-color","blue");
                $(".errorMsg").text("");
                return false;
            })
            $("#phone").blur(function () {
                $("#phone").css("border-color","gray");
                var regExp = new RegExp("^1[0-9]{10}$");
                var value = $("#phone").val();
                if (!regExp.test(value)){
                    $(".errorMsg").text("手机号格式必须为1开头，共11位");
                }
            })
            $("#password").focus(function () {
                $("#password").css("border-color","blue");
                $(".errorMsg").text("")
            })
            $("#password").blur(function () {
                $("#password").css("border-color","gray");
                var regExp = new RegExp("^[0-9a-zA-z_]{8,16}$");
                var value = $("#password").val();
                if (!regExp.test(value)){
                    $(".errorMsg").text("密码格式必须为8-16位的数字、英文或_");
                }
            })
            $("#verifycode").focus(function (){
                $("#verifycode").css("border-color","blue");
            })
        })
    </script>
</head>
<body>
<div id="d">
    <span id="sp1">欢迎您来到网上银行</span>
</div>
<span id="sp3">帮助中心 丨 2022&nbsp;Bank</span><!-- 连续多个空格和回车会折叠，所以想要多个空格显示在页面要用&nbsp;为一个空格，多来几个即可 -->

<div id="db" >
    <div id="d1">
        <span style="font-weight: bold;font-size: 40px;">欢迎登录</span>
        <br>
        <span style="font-size: 14px;color: darkgray;">没有帐号？</span>
        <a href="${pageContext.request.contextPath}/pages/user/regist.jsp" style="font-size: 14px;text-decoration: none;font-weight: 100;">注册</a>
        <br>
        <span style="font-size: 14px;color: darkgray;">忘记密码？</span>
        <a href="${pageContext.request.contextPath}/pages/user/forget.jsp" style="font-size: 14px;text-decoration: none;font-weight: 100;">找回密码</a>
    </div>
    <div id = "d2">
        <span id="spp" class="errorMsg" style="color: red">${requestScope.msg}</span><br>
        <span class="s">手机号</span>
        <input class="t" id="phone" type="text" required placeholder="可用于登录和找回密码" <%--style="color: #2E58FF"--%>>
        <br>
        <br>
        <br>
        <br>
        <span class="s">密&nbsp;&nbsp;&nbsp;&nbsp;码</span>
        <input class="t" id="password" type="password" required placeholder="请设置登陆密码">
        <br>
        <br>
        <br>
        <br>
        <span class="s">验证码</span>
        <input type="text"  id="verifycode" class="t" placeholder="请输入验证码" style="width: 200px;">
        <img id="code_img" alt="" src="/kaptcha.jpg" style="float: right; position: relative; right: 45px; bottom: 120px; width: 135px;height: 40px;">
    </div>
    <div id="d3">
        <input type="hidden" name="action" value="login">
        <button id="b">登录</button>
        <br><br>
    </div>
</div>
</body>
</html>
